<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onUpdated, onMounted, onUnmounted, ref } from 'vue'

const age = ref(10)

const getHouseList = () => { }
getHouseList()

onBeforeMount(() => {
    console.log(`挂载之前---onBeforeMount()`)
})

onMounted(() => {
    console.log(`挂载之后---onMounted()`)
})

onBeforeUpdate(() => {
    console.log(`视图更新之前---onBeforeUpdate()`)
})

onUpdated(() => {
    console.log(`视图更新之后---onUpdated()`)
})

onBeforeUnmount(() => {
    console.log(`组件销毁之前---onBeforeUnmount()`)
})

onUnmounted(() => {
    console.log(`组件销毁之后---onUnmounted()`)
})

</script>

<template>
    <div>
        <div>{{ age }}</div>
        <button @click="age++">修改年龄</button>
    </div>
</template>

<style scoped></style>